<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta name="keywords" content="美琴，御坂美琴，misaka，mikoto，misaka mikoto，misaka-mikoto，炮姐，超电磁炮">
<meta name="theme-color" content="#E18393">
<script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?60297d1229e157e97320df253bf06e97";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s)
    })();
  </script>
<meta charset="utf-8">
<meta name="msvalidate.01" content="AFAC2044429F0EB9C34E9C53A6ED89F3" />
<meta name="baidu-site-verification" content="code-qgFG5UwLMb" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>⌈misaka-mikoto御坂美琴⌋</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script> 
<script src="JavaScript/main.js"></script>
<style type="text/css" >
* {
    padding: 0;
    margin: 0;
}
a:active, a:hover {
    outline: 0;
}
body {
    background-color: #ffFFFF;
    height: 200px;
}
body p {
    color: #0099CC;
    font-size: 1.1em;
    font-weight: 100;
    letter-spacing: 0.5em;
}
.sidebar {
    position: fixed;
    left: 0px;
    width: 15%;
    height: 100%;
    background: #FFFFFF;
    transition: all .5s ease;
    box-shadow: 2px 4px 6px #BFBFBF;
}
.sidebar .top {
    font-size: 4em;
    color: #FFFFFF;
    text-align: center;
    height: 64px;
    line-height: 60px;
    background-color: #E18393;
    user-select: none;
    box-shadow: 2px 4px 6px #BFBFBF;
}
.sidebar ul a {
    display: block;
    height: 100%;
    width: 100%;
    text-align: left;
    line-height: 2em;
    font-size: 1.25em;
    color: #fb7299;
}
ul li:hover a {
    padding-left: 30px;
    color: aqua;
    border-left: 5px solid #fb7299;
    transition: all 0.5s;
}
#check {
    display: none;
}
i {
    font-style: normal;
}
.a-san {
    border-radius: 60px;
    width: 360px;
    height: 200px;
    border: #BABABA 1px solid;
    margin: 20px 20px;
}
.userMenu {
    left: 15%;
    float: left;
    width: 100%;
    height: 100%;
    box-shadow: 2px 4px 6px #BFBFBF;
}
#content {
    position: absolute;
    left: 15%;
}
#did {
    box-shadow: 2px 4px 6px #BFBFBF;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translate(calc(+100% - 10 * 15em));
}
}
.marquee {
    position: relative;
    margin: auto;
    height: 12.5em;
    overflow: hidden;
}
.marquee ul {
    position: absolute;
    display: flex;
    height: 12.5em;
    left: 0;
    animation: 10s infinite linear scroll;
}
.marquee ul li {
    float: left;
    list-style: none;
    width: 12.5em;
    height: 12.5em;
}
.marquee ul li img {
    width: inherit;
    height: inherit;
}
</style>
<link rel="icon" type="image/x-icon" href="https://image-1309525160.cos.ap-beijing.myqcloud.com/image/title.jpeg">
<link rel="prefetch" href="./live2d/mikoto/mikoto.model.json">
<script src="https://image-1309525160.cos.ap-beijing.myqcloud.com/live2d%2Fstatic%2Fl2d.js"></script>
<script src="https://image-1309525160.cos.ap-beijing.myqcloud.com/live2d%2Fstatic%2Fpio.js"></script>
<link rel="prefetch" href="./live2d/mikoto/mikoto.model.json">
<link href="https://image-1309525160.cos.ap-beijing.myqcloud.com/live2d%2Fstatic%2Fpio.css" rel="stylesheet" type="text/css">
</head>

<body>
<input type="checkbox" id="check">
<div class="userWrap">
  <div class="sidebar">
    <div class="top">Hi~</div>
    <ul class="userMenu">
      <li class="current" data-id="center"><a style="cursor:pointer">主 页</a></li>
      <li data-id="about-railgun"><a style="cursor:pointer">关 于 美 琴</a></li>
      <li data-id="artalk"><a style="cursor:pointer">留 言 板</a></li>
      <li data-id="links"><a style="cursor:pointer">友 情 链 接</a></li>
      <li data-id="about"><a style="cursor:pointer">关 于 我 们</a></li>
      <li data-id="need-help"><a style="cursor:pointer">招 贤 纳 士</a></li>
      <li>
        <div style="width: 40%">
          <div> <a href="https://github.com/misaka-mikoto-love/misaka-mikoto-love.github.io" title="前往仓库" target="_blank">
            <div class="md-source__icon md-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24">
                <path fill-rule="evenodd"
                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"> </path>
              </svg>
				
            </div>
            </a> </div>
        </div>
      </li>
    </ul>
  </div>
  <div id="content" style=""></div>
</div>
<div class="pio-container right">
  <div class="pio-action"></div>
  <canvas id="pio" width="240" height="320"></canvas>
</div>
</body>
<script>
  $(function() {
    $(".userWrap").on("click", "li", function() {
      var sId = $(this).data("id");
      window.location.hash = sId;
      loadInner(sId)
    });

    function loadInner(sId) {
      var sId = window.location.hash;
      var pathn, i;
      switch (sId) {
        case "#center":
          pathn = "./pages/single-page/s-index.html";
          i = 0;
          break;
        case "#about-railgun":
          pathn = "./pages/single-page/about-railgun.html";
          i = 1;
          break;
		case "#artalk":
          pathn = "./pages/single-page/artalk.html";
          i = 2;
          break;
        case "#links":
          pathn = "./pages/single-page/links.html";
          i = 3;
          break;
        case "#about":
          pathn = "./pages/single-page/about.html";
          i = 4;
          break;
        case "#need-help":
          pathn = "./pages/single-page/need-help.html";
          i = 5;
          break;
        
        default:
          pathn = "./pages/single-page/s-index.html";
          i = 0;
          break
      }
      $("#content").load(pathn);
      $(".userMenu li").eq(i).addClass("current").siblings().removeClass("current")
    }
    var sId = window.location.hash;
    loadInner(sId)
  });
</script>
<script>var pio = new Paul_Pio({
    "mode": "fixed",
    "hidden": true,
    "content": {
    "welcome": ["欢迎来到这里！", "今天天气不错，一起来玩吧！", "哼哼~"],
    },
    "night": "single.night()",
    "model": ["./live2d/mikoto/mikoto.model.json"]
});</script>
</html>